<template>
	<view>
		<view class="body">
			<view class="item1">
				<image src="../../static/image/dingdan.png" mode=""></image>
				<view>
					租赁订单信息
				</view>
			</view>
			<view class="item2">
				<view class="item21">
					<view class="name">
						设备名称：
					</view>
					<view class="info">
						{{detail.bone_name}}
					</view>
				</view>
				<view class="item21">
					<view class="name">
						租赁场地：
					</view>
					<view class="info">
						{{data.name}}
					</view>
				</view>
				<view class="item21">
					<view class="name">
						押金：
					</view>
					<view class="info" style="color: #3EB1CF;">
						￥{{deposit}}
					</view>
				</view>
			</view>
			<view class="item3">
				<view class="title">
					租金规则：
				</view>
				<view class="info">
					{{zujin_guize}}
				</view>
			</view>
			<view class="item3" style="border-bottom: none;">
				<view class="title">
					付款方式：
				</view>
				<view class="info">
					{{deduction}}
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="submit" @click="submit">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../common/common.js'
	import jssdk from '../../common/jssdk.js'
	export default {
		data() {
			return {
				place_id: 0,
				detail: {},
				data: {},
				deduction: "",
				zujin_guize: "",
				deposit: "",
				is_wx: 1,
			};
		},
		onLoad() {
			this.is_wx = uni.getStorageSync("is_wx");
			this.place_id = uni.getStorageSync('place_id')
			this.place()
			// this.ali()
		},
		methods: {
			ali() {
				if (this.is_wx == 0) {
					var script = document.createElement("script");
					script.type = "text/javascript";
					script.src = "https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js";
					document.body.appendChild(script);
				}
			},
			place() {
				common.request('post', '/place/index', {
					place_id: this.place_id
				}).then(res => {
					if (res.code == 1) {
						this.data = res.data.data
						this.detail = res.data
						this.deduction = res.data.deduction
						this.zujin_guize = res.data.zujin_guize
						this.deposit = res.data.deposit
					}
				})
			},
			submit:common.throttle(function() {
				common.request('post', '/payment/pay').then(res => {
					if (res.code == 1) {
						if (res.data.is_wx == 1) {
							jssdk.chooseWXPay(res.data.result).then(r => {
								if (r.errMsg == 'chooseWXPay:ok') {
									uni.showToast({
										title: '支付成功',
										mask: true,
										success() {
											setTimeout(function() {
												var pages = getCurrentPages(); //当前页
												var beforePage = pages[pages.length -
												3]; //上个页面
												beforePage.navtoindex()
												uni.navigateBack({
													delta: 2
												})
											}, 1200)
										}
									})
								}
							})
						} else {
							// alert(res.data.result)
							ap.tradePay({
								orderStr: res.data.result
							}, function(res) {
								// ap.alert(res.resultCode);
								if(res.resultCode==9000){
									uni.showToast({
										title: '支付成功',
										mask: true,
										success() {
											setTimeout(function() {
												var pages = getCurrentPages(); //当前页
												var beforePage = pages[pages.length -
												3]; //上个页面
												beforePage.navtoindex()
												uni.navigateBack({
													delta: 2
												})
											}, 1200)
										}
									})
								}
							});
							// window.location.href=res.data.result
						}

					}

				})
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F2;
		padding-top: 24rpx;
	}

	.foot {
		position: fixed;
		width: 100%;
		bottom: 50rpx;

		.submit {
			margin: 0 auto;
			width: 702rpx;
			height: 100rpx;
			background: linear-gradient(0deg, #31A8C6 20%, #72D6EF 100%);
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FEFEFE;
			line-height: 100rpx;

			text-align: center;
		}
	}

	.body {
		margin-left: 24rpx;
		margin-right: 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.item3 {
			margin-left: 18rpx;
			margin-right: 18rpx;
			padding-left: 14rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid rgba($color: #BFBFBF, $alpha: 0.32);

			.title {
				margin-top: 37rpx;
				color: #212121;
				font-size: 28rpx;
				font-weight: bold;
			}

			.info {
				margin-top: 20rpx;
				color: #6B6B6B;
				font-size: 28rpx;
			}
		}

		.item2 {
			margin-left: 18rpx;
			margin-right: 18rpx;
			padding-left: 14rpx;
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid rgba($color: #BFBFBF, $alpha: 0.32);

			.item21 {
				margin-top: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #212121;
				display: flex;
				align-items: center;

				.name {
					width: 30%;
				}

				.info {
					color: #7B7B7B;
				}
			}
		}

		.item1 {

			margin: 0 18rpx;
			padding-left: 14rpx;
			display: flex;
			align-items: center;
			height: 120rpx;
			border-bottom: 1rpx solid rgba($color: #BFBFBF, $alpha: 0.32);

			image {
				width: 29rpx;
				height: 35rpx;
			}

			view {
				margin-left: 18rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272727;
			}
		}
	}
</style>
